<template>
  <view>
    <div class="title">订单详情</div>
    <div class="table">
      <van-cell-group>
        <van-cell title="出发时间" v-model="startTime" center="true" />
        <van-cell title="车型" v-model="carTypeConfig.name" center="true" />
        <van-cell
          title="承载类型"
          v-model="loadingType"
          center="true"
          label="描述信息"
        />

        <van-row
          class="midd-1"
          v-for="point in mapPointArr"
          v-bind:key="point.pId"
          gutter="10px"
          style=""
        >
          <van-col span="20" offset="2">
            <van-icon
              class="point-icon"
              v-if="point.pointType == 1"
              name="flag-o"
            />
            <van-icon
              class="point-icon"
              v-else-if="point.pointType == 2"
              name="logistics"
            />
            <van-icon
              class="point-icon"
              v-else-if="point.pointType == 0"
              name="location-o"
            />
            <van-cell
              :title="point.addDetail"
              :label="point.city"
              @click="pointClick(point)"
            />
          </van-col>
        </van-row>
        <van-cell title="总里程" v-model="totalDistance" center="true" />
        <van-cell
          title="基础费用"
          v-model="carTypeConfig.basePrice"
          center="true"
          :label="carTypeConfig.remark"
        />
      </van-cell-group>
      <van-cell-group>
        <van-cell title="总费用" v-model="totalPrice" />
      </van-cell-group>
      <van-cell-group>
        <van-button type="default" class="submit-btn" @click="payClick"
          >支付
        </van-button>
        <van-button
          type="default"
          class="submit-btn"
          @click="pointClick(mapPointArr[1])"
          >测试
        </van-button>
      </van-cell-group>
    </div>
  </view>
</template>
<script>
import mapUtil from "@/utils/mapLocation.js";
import store from "@/utils/store.js";
export default {
  config: {
    navigationBarTitleText: "好家帮",
  },
  data() {
    return {
      orderId: "",
      orderNo: "",
      pointMap: {},
      totalPrice: 0,
      mapPointArr: new Array(),
      totalDistance: 0,
      loadingType: "",
      destInfo: {},
      startTime: "",
      carType: "",
      carTypeConfig: {},
    };
  },
  watch: {},
  computed: {
    carTypeList() {
      return store.state.trucks;
    },
  },
  methods: {
    payClick() {
      const paySubmit = {
        orderId: this.orderId,
        orderNo: this.orderNo,
      };

      this.$API.post("/pay/wx/order/submit", paySubmit).then((res) => {
        console.log("order/submit res", res);
      });

      let packageVal = res.data.packageValue;
      wx.requestPayment({
        timeStamp: Date.parse(new Date()) / 1000,
        nonceStr: payNonceStr,
        package: packageVal,
        signType: "MD5",
        paySign: "",
        success: function (res) {
          console.log("支付成功", res);
        },
        fail: function (error) {
          console.log("支付失败", error);
        },
      });
    },
    pointClick(point) {
      console.log("point>>", point);
      mapUtil.getLocation(point.latitude, point.longitude);
    },
    getOrderDetail(orderId) {
      let p = new Promise((resolve, reject) => {
        this.$API.get("/transport/order/get?orderId=" + orderId).then((res) => {
          console.log("res", res);
          if (res.code === 20000) {
            const data = res.data;
            const order = data.order;
            const carConfA = data.car;
            const mapLine = order.mapLine;
            const pointMap = mapLine.pointMap;

            if (pointMap) {
              let key = "0";
              let mPointArr = [];
              while (pointMap[key]) {
                const mPoint = pointMap[key];
                if (mPoint) {
                  const point = {
                    addDetail: mPoint.addressDetails,
                    city: mPoint.city,
                    district: mPoint.district,
                    province: mPoint.province,
                    longitude: mPoint.longitude,
                    latitude: mPoint.latitude,
                    pointType: mPoint.pointType,
                    pId: mPoint.pid,
                    nId: mPoint.nextId,
                  };
                  key = mPoint.nextId;
                  mPointArr.push(point);
                }
              }

              const carConf = carConfA[0];

              const car = {
                name: carConf.carName,
                id: carConf.carType,
                height: carConf.height,
                width: carConf.width,
                weight: carConf.weight,
                img: carConf.carImg,
                remark: carConf.remark,
                priceKm: carConf.priceKm,
                basePrice: carConf.basePrice,
              };

              const resData = {
                startTime: order.serverTime,
                loadingType: order.loadingType,
                orderNo: order.orderNo,
                lTypeDesc: order.loadingTypeDesc,
                cTypeDesc: order.carTypeDesc,
                carType: order.carType,
                pointArr: mPointArr,
                carTypeConfig: car,
                userDestInfo: order.userDestInfo,
              };

              resolve(resData);
            } else {
              const error = {
                mag: "获取行程节点信息异常",
              };
              reject(error);
            }
          } else {
            const error = {
              mag: "服务调用异常",
            };
            reject(error);
          }
        });
      });
      return p;
    },
  },
  mounted() {
    const _page = this;
    let p = this.getOrderDetail(this.orderId);
    p.then((orderDetail) => {
      this.startTime = orderDetail.startTime;
      this.loadingType = orderDetail.lTypeDesc;
      this.carType = orderDetail.cTypeDesc;
      this.orderNo = orderDetail.orderNo;

      const carConfig = orderDetail.carTypeConfig;

      let p1 = mapUtil.calculateDistance(orderDetail.pointArr);
      p1.then((res1) => {
        let totalDistance = res1.totalDistM + " M";

        let totalPrice =
          res1.totalDistM * 0.001 * carConfig.priceKm + carConfig.basePrice;

        const oUpdateInfo = {
          orderId: this.orderId,
          totalPrice: totalPrice,
          totalDistance: res1.totalDistM,
        };

        _page.carTypeConfig = carConfig;
        _page.mapPointArr = orderDetail.pointArr;
        this.$API.post("/transport/order/update", oUpdateInfo).then((res) => {
          if (res.code === 20000) {
            _page.totalPrice = totalPrice;
            _page.totalDistance = totalDistance;
          }
        });
        console.log("_page.mapPointArr", _page.mapPointArr);
      }).catch((error) => {
        console.error("距离计算异常", error);
        reject({ msg: "距离计算异常" });
      });
    }).catch((error) => {
      console.error("error", error);
    });
  },
  onLoad(options) {
    //this.orderId = options.orderId;
    this.orderId = 29;
  },
  onShow() {},
};
</script>
<style scoped>
.title {
  text-align: center;
}
.table {
  margin: 10px;
}
.midd-1 {
  margin: 10px 1px;
  display: block;
}
.point-icon {
  margin-top: 10px;
}
</style>